import './home.scss'
import React, { Component ,Suspense} from 'react'
import { Route,Redirect} from 'react-router-dom';
import {Lowers} from '../../route/lower.js';
import { Link } from 'react-router-dom';
export default class Home extends Component<any,any> {
    constructor(props: any) {
        super(props);
        this.state = {
            num:1
        }
    }
    handleClick = (ele:Number)=>{
        // console.log('获取的元素:',ele)
        this.setState({
            num: ele
        })
    }
    componentWillMount(){
        
    }
    render() {
        const {match} = this.props;
        const path = match.path;
        return (
            <div>
                
                    {/* 二级标签组件 */}
                    <div className="tagPar">
                        <div className="tag w960">
                            <div className="list">
                                <ul>
                                    <li className={this.state.num == 1?'active':''} onClick={()=>this.handleClick(1)}>
                                        <Link to='/home/tuijian/1'>推荐</Link>
                                    </li> 
                                    <li className={this.state.num == 2?'active':''}>
                                        <Link to='/home/gz' onClick={()=>this.handleClick(2)}>关注</Link>
                                    </li> 
                                    <li className={this.state.num == 3?'active':''}>
                                        <Link to='/home/backend/1' onClick={()=>this.handleClick(3)}>后端</Link>
                                    </li> 
                                </ul>
                            </div>
                            <div className="mangan">标签管理</div>
                        </div>
                    </div>
                {/* 子组件 */}
                <div className="lower"> 
                <Suspense fallback={<div className="loading">加载中....</div>}>
                {/* <Switch> */}
                <Redirect from="/home/tuijian" to='/home/tuijian/1'/>
                    {Lowers.map((route: any, index: any) => (
                        <Route
                        path={route.path}
                        key={index}
                        component={route.com}
                        />
                    ))}
                    {/* </Switch> */}
                    </Suspense>
                </div>
                
            </div>

        )
    }
}